<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />

    <el-card v-if="detail" class="mt-4">
      <template #header></template>
      
      <!-- …更多字段… -->
<div class="order-detail-status">
    <div class="left">
      <div class="status-title">订单状态：{{ statusText }}</div>
      <div class="btn-group">
        <el-button plain size="small">订单跟踪</el-button>
        <el-button plain size="small">调度跟踪</el-button>
      </div>
    </div>
    
  </div>
  <div class="base-info-section">
    <div class="section-title">基本信息</div>
    <div class="info-cards">
      <!-- 交易信息 -->
      <div class="info-card">
        <div class="info-title">交易信息</div>
        <div class="info-row">订单编号：{{ detail.value.orderBasic.orderNo }} <el-link type="primary" @click="copy(order.orderNo)" :underline="false">复制</el-link></div>
        
        <div class="info-row">创建时间：{{ order.createTime }}</div>
        <div class="info-row">付款时间：{{ order.payTime }}</div>
      </div>
      <!-- 买家信息 -->
      <div class="info-card">
        <div class="info-title">买家信息</div>
        <div class="info-row">买家昵称：{{ order.buyerName }}</div>
        <div class="info-row">手机号：{{ order.buyerPhone }}</div>
        <div class="info-row">使用设备：{{ order.device }}</div>
      </div>
      <!-- 商家信息 -->
      <div class="info-card">
        <div class="info-title">商家信息</div>
        <div class="info-row">店铺名称：{{ order.shopName }}</div>
        <div class="info-row">联系方式：{{ order.shopPhone }}</div>
        <div class="info-row">所在地区：{{ order.shopRegion }}</div>
        <div class="info-row">详细地址：{{ order.shopAddress }}</div>
        <div class="info-row">取餐号码：{{ order.pickupNo }}</div>
      </div>
      <!-- 配送信息 -->
      <div class="info-card">
        <div class="info-title">配送信息</div>
        <div class="info-row">收货地址：{{ order.receiverAddress }}</div>
        <div class="info-row">配送方式：{{ order.deliveryType }}</div>
        <div class="info-row">预计送达：{{ order.estimateTime }}</div>
        <div class="info-row">餐具数量：{{ order.tablewareCount }}</div>
        <div class="info-row">订单备注：{{ order.remark }}</div>
      </div>
      <!-- 发票信息 -->
      <div class="info-card">
        <div class="info-title">发票信息</div>
        <div class="info-row">开具发票：{{ order.invoiceStatus }}</div>
        <div class="info-row">发票类型：{{ order.invoiceType }}</div>
        <div class="info-row">发票内容：{{ order.invoiceContent }}</div>
        <div class="info-row">发票抬头：{{ order.invoiceTitle }}</div>
        <div class="info-row">企业税号：{{ order.invoiceTaxNo }}</div>
      </div>
    </div>
  </div>



    </el-card>

    <el-empty v-else description="加载中…" />
  </div>

  
</template>

<script setup>

import {  onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail } from '@/api/order'   // ← 确保已实现 export
import { ref, computed } from 'vue'
import { Check } from '@element-plus/icons-vue'



/* 路由参数 */
const route = useRoute()
const id = ref(route.params.id)        // 保证响应式

/* 数据与状态 */
const detail   = ref(null)
const loading  = ref(false)
const errorMsg = ref('')

const deliveryStatus = computed(() => orderDetail.value.orderBasic.deliveryStatus)
const statusText = computed(() => statusMap[detail.value.orderBasic.deliveryStatus]?.text || '未知状态')
const currentStep = computed(() => statusMap[deliveryStatus.value]?.step || 0)

// 假设你已从接口获取到订单详情
// const orderDetail = ref({
//   orderBasic: {
//     deliveryStatus: detail.value.orderBasic.deliveryStatus // 示例：2=骑手配送中
//   }
// })
/* 配送状态字典 */
const statusMap = {
  1: { text: '待骑手接单', step: 1 },
  2: { text: '骑手配送中', step: 2 },
  3: { text: '已送达', step: 3 },
  4: { text: '配送超时', step: 4 },
  5: { text: '待商家退款', step: 5 },
  6: { text: '商家拒绝退款', step: 6 },
  7: { text: '商家成功退款', step: 7 },
  8: { text: '交易成功', step: 8 },
  9: { text: '交易关闭', step: 9 },

  // 你可以根据实际后端状态码补充
}

/* 核心：拉取订单详情 */
async function fetchDetail (orderId) {
  loading.value  = true
  detail.value   = null
  errorMsg.value = ''
  try {
    const resp = await getOrderDetail(orderId)
    detail.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}

/* 首次进入页面拉数据 */
onMounted(() => fetchDetail(id.value))

/* 若同一个组件复用，监听路由参数变化自动刷新 */
watch(
  () => route.params.id,
  newId => {
    id.value = newId
    fetchDetail(newId)
  }
)

</script>


<style scoped>
.order-detail-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.left {
  flex: 1;
}
.status-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
}
.btn-group {
  display: flex;
  gap: 12px;
}
.right {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.step {
  display: flex;
  align-items: center;
  position: relative;
}
.circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  border: 2px solid #e4e7ed;
  transition: all 0.2s;
}
.circle.finished {
  background: #ecf5ff;
  color: #409eff;
  border-color: #409eff;
}
.circle.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}
.label {
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  color: #333;
  width: 60px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
}
.line {
  width: 60px;
  height: 2px;
  background: #e4e7ed;
  margin: 0 8px;
}
.step .circle.finished + .line {
  background: #409eff;
}


.base-info-section {
  margin-bottom: 32px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
}
.info-cards {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.info-card {
  background: #f7faff;
  border-radius: 12px;
  padding: 18px 22px 14px 22px;
  min-width: 220px;
  flex: 1;
  box-sizing: border-box;
  box-shadow: 0 2px 8px #f0f1f2;
}
.info-title {
  font-weight: 500;
  margin-bottom: 10px;
  color: #409eff;
}
.info-row {
  font-size: 15px;
  color: #333;
  margin-bottom: 6px;
  word-break: break-all;
}
.info-row:last-child {
  margin-bottom: 0;
}
</style>